<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="">
		 *{
		 	margin: 0;
		 	padding: 0;
		 }
          /*	内边距padding：标签/内容到父元素边框的距离	 */
		 p{
		 	background: skyblue;
             /*   padding只有一个值时 上下左右都是该值 
          /*padding: 10px;*/
          /* 两个值的时候 上下是前一个值 左右是后一个值*/
          /*padding: 10px 50px;*/
          /*三个值的时侯 上是第一个值 左右是第二个值 下是第三个值 */
          /*padding: 10px 50px 100px;*/
          /*四个值的时候 上是第一个值 右是第二个值 下是第三个值 左是第四个值  */
          padding: 10px 20px 50px 100px;
		 	margin: 10px;
             /*		单独小属性:
                padding-top 上内边距
                padding-bottom 下内边距
                padding-left 左内边距
                padding-right 右内边距 	*/
             /*    父子之间用padding  兄弟之间用margin   */
                padding-top: 30px;
		 }
           /*	padding对行内元素 左右生效 上下只是看着生效	 */
		 span{
		 	padding: 10px;
		 	background: pink;
		 }
	</style>
</head>
<body>
 <p>周末去海边挖扇贝</p>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
 <span>hhhhhhhhhh</span>
</body>
</html>